<html lang="en">
<head>
		<link
						rel="stylesheet"
						href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
		/>
</head>
<body style="padding: 20px; font-family: sans-serif">
<script type="text/javascript">
		(async function () {
				window._hyperscript = (await import('../../../src/web/_hyperscript_w9y.js')).default
		})()
</script>
<em>Fetch Timeout Tests</em>
<hr/>
<style>
		button {
				padding: 12px;
				margin: 12px;
		}
</style>


<div>
		<h3>2 Second Wait...</h3>
		<button _="on click fetch http://localhost:5000/respond?time=2000 then put it after me">
				Get It
		</button>
</div>

<div>
		<h3>2 Second Wait, abort at 100ms</h3>
		<button _="on click fetch http://localhost:5000/respond?time=2000 with timeout:100ms
			                    then put it after me">
				Get It
		</button>
</div>

<div>
    <h3>5 Second Wait + Abort Button</h3>
    <button id="btn1"
            _="on click
                 add @disabled
                 fetch http://localhost:5000/respond?time=5000
                 put the result after me
               finally
                 remove @disabled">
        Get Response
    </button>
    <button _="on click send fetch:abort to #btn1">
        Cancel The Request
    </button>
</div>

<div>
		<h3>Playground</h3>
		<div>
				<button _='on click fetch http://localhost:5000/request_type with action:"GET"
			                    then put it after me'>
						Get It
				</button>
		</div>
		<button _='on click fetch http://localhost:5000/request_type as JSON
			                    then put it after me'>
				Get It
		</button>
</div>


</body>
</html>
